<template>
  <div class="page-company-rent">
    <div class="company-rent-header">
      <div class="slogan">
        <h1>企业租车解决方案</h1>
      </div>
      <ul>
        <li>
          <h2>管家服务</h2>
          <p>全国3000+车管家<br>行政级服务标准</p>
        </li>
        <li>
          <h2>牌照资源</h2>
          <p>限牌城市<br>丰富的牌照储备</p>
        </li>
        <li>
          <h2>优质车源</h2>
          <p>绿色共享优势<br>价格低于市场10%以上</p>
        </li>
        <li>
          <h2>定制方案</h2>
          <p>时租/日租/月租/年租<br>用车场景全覆盖</p>
        </li>
        <li>
          <h2>高效管理</h2>
          <p>“企业云”后台<br>精准调度，集中管理</p>
        </li>
      </ul>
    </div>
    <div class="company-rent-form">
      <div class="web-title">
        <h3 class="web-title__text">您想租什么类型的车辆呢</h3>
        <h5 class="web-title__desc">请留下联系方式，我们会尽快联系您，提供专人管家服务</h5>
      </div>
      <div style="display:none">
        <div class="at-input input at-input--middle"><span class="at-input__placeholder">企业名称（选填）</span><input class="at-input__input"
                 value
                 placeholder
                 name="companyName"></div>
      </div>
      <div class="at-input input at-input--middle"><span class="at-input__placeholder">姓名</span><input class="at-input__input"
               value
               placeholder
               name="name"></div>
      <div class="at-input input at-input--middle"><span class="at-input__placeholder">手机号码</span><input class="at-input__input"
               value
               placeholder
               name="mobile"></div>
      <div class="at-input input at-input--middle"><span class="at-input__placeholder">用车城市</span><input class="at-input__input"
               value
               placeholder
               name="city"></div>
      <div class="at-select car-type">
        <div class="at-select__value"><span>请选择车辆类型</span>
          <div class="val"></div>
        </div>
        <div class="at-select__options">
          <div class="at-select__option">经济型</div>
          <div class="at-select__option">舒适型</div>
          <div class="at-select__option">SUV</div>
          <div class="at-select__option">MPV</div>
          <div class="at-select__option">豪华型</div>
        </div>
      </div><button class="at-button at-button--green at-button--large submit">提交申请</button>
    </div>
    <div class="company-rent-scenes">
      <div class="web-title">
        <h3 class="web-title__text">覆盖企业用车主要场景</h3>
      </div>
      <div class="list">
        <div class="item">
          <h4>企业短租</h4>
          <p>万款车型 APP自主下单</p>
        </div>
        <div class="item">
          <h4>企业长租</h4>
          <p>30天起特惠套餐<br>专人服务 定向寻找目标车型</p>
        </div>
        <div class="item">
          <h4>商务自驾</h4>
          <p>特色商务车型套餐</p>
        </div>
        <div class="item">
          <h4>会务会议</h4>
          <p>可选代驾模式</p>
        </div>
      </div>
    </div>
    <div class="company-rent-solution">
      <div class="web-title">
        <h3 class="web-title__text">帮助业务解决租车痛点</h3>
      </div>
      <div class="list clearfix">
        <div class="item"><i>01</i>
          <h4>降低固定资产投入</h4>
          <p>有效弱化/避免车辆购置的重资模式，解放资金</p>
        </div>
        <div class="item"><i>02</i>
          <h4>降低车队管理成本</h4>
          <p>由专业、高效的外部车队管理代替高成本的企业自营车队</p>
        </div>
        <div class="item"><i>03</i>
          <h4>控制企业出行成本</h4>
          <p>专业的“企业云”共享后台，合理规划&控制员工出行成本</p>
        </div>
        <div class="item"><i>04</i>
          <h4>制定化解决方案</h4>
          <p>按照企业用车需求，制定专属产品方案</p>
        </div>
        <div class="item"><i>05</i>
          <h4>提高出行用车体验</h4>
          <p>优质的车源、专业管家服务及完善的管理体系提高出行体验</p>
        </div>
        <div class="item"><i>06</i>
          <h4>优化出行效率</h4>
          <p>全程跟进用车过程的即时需求，快速响应，高效处理</p>
        </div>
      </div>
    </div>
    <div class="company-rent-car-types">
      <div class="web-title">
        <h3 class="web-title__text">企业长租车型</h3>
      </div>
      <!-- 汽车信息区域 -->
      <div class="list">
        <div class="swiper-wrapper"
             :style="'transition-duration: 300ms; transform: translate3d('+move+'px, 0px, 0px);'">
          <div v-for="(carInfo,index) in carInfoList"
               :key="index"
               :class="carInfo.carClass"
               style="width: 244.75px; margin-right: 15px;"><i class="thumb"></i>
            <h4>{{carInfo.carH3}}</h4>
            <p><strong>{{carInfo.carPriceDiscount}}</strong>元起/月</p><del>{{carInfo.carPriceRaw}}
              <!-- -->元起/月
            </del>
            <div class="detail">
              <p>车型分类</p>
              <p>{{carInfo.carType}}</p>
            </div>
          </div>
        </div>
      </div>
      <button class="swiper-btn swiper-btn-left"
              name="left"
              @click="left()">
      </button>
      <button class="swiper-btn swiper-btn-right"
              name="right"
              @click="right()">
      </button>
    </div>
  </div>

</template>

<script>
export default {
  name: 'enterpriseRent',
  data () {
    return {
      move: 0,
      carInfoList: [
        {
          carClass: 'swiper-slide item item-haohua',
          carH3: '豪华型',
          carPriceRaw: '15000',
          carPriceDiscount: '10000',
          carType: '奥迪A6L、奔驰E级、宝马5系等'
        },
        {
          carClass: 'swiper-slide item item-jingji',
          carH3: '经济型',
          carPriceRaw: '6000',
          carPriceDiscount: '2700',
          carType: '大众朗逸、丰田卡罗拉、福特福克斯等'
        },
        {
          carClass: 'swiper-slide item item-shushi',
          carH3: '舒适型',
          carPriceRaw: '9000',
          carPriceDiscount: '5500',
          carType: '大众帕萨特、丰田凯美瑞、本田雅阁等'
        },
        {
          carClass: 'swiper-slide item item-mpv',
          carH3: 'MPV',
          carPriceRaw: '12000',
          carPriceDiscount: '6500',
          carType: '别克GL8、本田奥德赛、大众途安等'
        },
        {
          carClass: 'swiper-slide item item-suv',
          carH3: 'SUV',
          carPriceRaw: '9000',
          carPriceDiscount: '5500',
          carType: '大众途观、丰田RAV4、本田CRV等'
        }
      ]

    }
  },
  methods: {
    left () {
      if (this.move !== 0) { this.move += 259.75 }
    },
    right () {
      if (this.move !== -259.75) { this.move -= 259.75 }
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/style.css';
</style>
